Курс React с нуля для начинающих + 3 проекта в портфолио!

5Premium-PLUS

Курс позволит освоить React от азов до создания полноценного SPA(single page application)-приложения с роутингом и продвинутым управлением состоянием.
Создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.

Начать обучение Регистрация

О курсе - Чему Вы научитесь?

Frontend-разработка - одна из самых популярных и востребованных профессий современности. Интересная и увлекательная. А React - самый популярный её инструмент, разработанный компанией Facebook. На React сделаны Instagram, Facebook, Twitter, AirBnb, PayPal, Uber, Netflix, Vkontakte, Vimeo, Trello, сервисы Яндекса и много-много других крупных продуктов.

Курс React с нуля для начинающих позволит не только освоить азы данного инструмента, но и получить современные продвинутые техники его использования.

Чему вы научитесь

Начнём с классического подхода в создании приложений на React. Рассмотрим базовые концепции, как они трансформировались в современные. Научитесь работать и с теми, и с другими.

В курсе на практике создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.

  • Узнаете все особенности последней версии React 17
  • Научитесь работать и с классовыми, и с функциональными компонентами
  • Разберётесь, чем отличаются управляемые и неуправляемые компоненты
  • Научитесь использовать хуки
  • Освоите работу с состоянием и жизненным циклом приложения
  • Создадите SPA (single page application) с react-router

Курс включает в себя:
  • Базовые навыки по работе с React - создание простых компонентов, управление состоянием приложения и его жизненным циклом
  • Продвинутые навыки по работе с React - современные техники, позволяющие добиваться хороших результатов
  • Создание Single Page Application - популярных SPA-приложений за счет "магии", позволяющей посетителям сайта переходить между страницами без полной перезагрузки в браузере
  • Разбор всех доступных хуков и создание собственных - встроенных методов, которые изменили представление о работе с React-приложениями
  • Публикация проектов онлайн - через популярный и бесплатный сервис GitHub Pages


Почему это именно тот курс, который даст результат?
“Меня зовут Михаил Непомнящий, и я профессиональный веб-разработчик. Я работаю с React каждый день и решаю с его помощью задачи самого разного уровня сложности.

При этом я также профессиональный преподаватель и обучаю людей веб-разработке с 2016 года. А курсы по React также провожу в учебном центре "Специалист" в Москве.

В своих курсах я стараюсь подавать материал максимально доступно - от простого к сложному и без воды. Помню как самому трудно было поначалу пробираться через дебри React, когда только начинал изучать его, и в этом курсе постарался сделать подачу максимально понятной.

В рамках курса мы сделаем 3 полноценных проекта, причем уровень сложности каждый раз будет возрастать. Таким образом, на практике мы будем последовательно закреплять те навыки и умения, которые были изучены.” - преподаватель и автор курса Михаил Непомнящий

Для кого этот курс
  • Для тех, кто хочет изучить самый популярный frontend фреймворк React JS и подготовить портфолио
  • Для тех, кто пробовал сам изучать React, но по какой-либо причине не справился и хочет закрыть пробелы
  • Для тех, кто хочет углубиться в веб-разработку и взять лучшее из современных практик
  • Для тех, кто застрял на первых шагах профессии и хочет добрать компетенций к резюме
  • Для тех, кто хочет получить актуальные навыки и стать более востребованным на рынке веб-разработки

Требования для прохождения курса
  • Базовые знания веб-разработки - HTML, CSS, JavaScript
Прежде чем углубляться в изучение библиотеки React, лучше сначала разобраться как следует с базовыми технологиями - рекомендуем изучить наши курсы:
Верстальщик - HTML, CSS, Bootstrap, JavaScript
ВЕБ-разработчик - с нуля до результата!
JavaScript - полный курс с нуля до результата!

Начать обучение

Получите +3 проекта в личное портфолио

В курсе много практики и часть выполненных вами проектов, заданий и работ вы сможете разместить в ваше личное портфолио для демонстрации потенциальным работодателям и заказчикам.

Начать обучение

План курса

Программа обучения включает видео уроки по изучению React с нуля для начинающих. Благодаря практическим заданиям и примерам, Вы сможете закрепить полученные знания по использованию React JS на практике.

развернуть все

свернуть все

О курсе React с нуля для начинающих + 3 проекта в портфолио!
2. React с JSX и без
  • 2.1 Библиотеки React и ReactDOM09:18
  • 2.2 Простое приложение на чистом React08:59
  • 2.3 Преобразование приложения в JSX07:27
  • 2.4 Практическое задание "Преобразование приложения в JSX" - Решение02:30
  • 2.5 Особенности JSX10:45
  • 2.6 Разделение приложения на модули06:14
  • 2.7 Условная отрисовка03:46
  • 2.8 Пример с прелоадером03:47
3. Классовые React-компоненты
  • 3.1 Разбор составляющих базового React-шаблона14:28
  • 3.2 Понятие React-компонента09:40
  • 3.3 Состояние компонента и управление им12:00
  • 3.4 Нюансы создания методов в классовых компонентах04:37
  • 3.5 Практическое задание "Создание полноценного кликера" - Решение04:33
  • 3.6 Понятие жизненного цикла React-компонента18:11
  • 3.7 Задание на создание таймера: что надо сделать01:27
  • 3.8 Практическое задание "Создание таймера" - Решение08:31
  • 3.9 Работа с коллекциями и атрибутом key05:23
  • 3.10 Однонаправленный поток данных и состояния10:50
  • 3.11 Задание на обновление состояния через дочерние компоненты: что надо сделать01:07
  • 3.12 Практическое задание "Обновление состояния через дочерние компоненты" - Решение04:20
  • 3.13 Отличие классовых компонентов от функциональных в классическом понимании01:48
4. Работа с формами в React
  • 4.1 Управляемые компоненты - принцип единой ответственности10:48
  • 4.2 Валидация значений формы07:38
  • 4.3 Элементы checkbox, radio button, select, textarea09:04
  • 4.4 Задание на создание формы подписки: что надо сделать01:38
  • 4.5 Практическое задание "Создание формы подписки с валидацией" - Решение07:41
  • 4.6 Использование рефов и управление фокусом09:18
  • 4.7 Неуправляемые компоненты05:22
5. Проект "Фильмы"
  • 5.1 Обзор проекта "Фильмы". Постановка задачи02:26
  • 5.2 Подготовка проекта, создание шапки и подвала16:27
  • 5.3 Знакомство с API базой фильмов07:19
  • 5.4 Задание на создание общего списка фильмов: что надо сделать01:52
  • 5.5 Практическое задание "Создание общего списка фильмов" - Решение16:12
  • 5.6 Добавление строки поиска07:51
  • 5.7 Практическое задание "Реализация поиска фильмов" - Решение05:12
  • 5.8 Задание на добавление фильтрации по категории: что надо сделать01:34
  • 5.9 Практическое задание "Добавление фильтрации по категориям" - Решение13:26
  • 5.10 Обработка неудачного поиска04:27
  • 5.11 Безопасное хранение ключа API04:25
  • 5.12 Сборка приложения и выгрузка на продакшн13:59
6. Функциональные React-компоненты
  • 6.1 Работа с состоянием в функциональном компоненте08:45
  • 6.2 Практическое задание "Кликер в функциональном компоненте" - Решение01:51
  • 6.3 Управление жизненным циклом через функциональный компонент08:04
  • 6.4 Использование рефов в функциональном компоненте08:48
  • 6.5 Практическое задание "Рефакторинг таймера на функциональный компонент" - Решение16:47
  • 6.6 Рефакторинг проекта с фильмами. Часть 107:55
  • 6.7 Рефакторинг проекта с фильмами. Часть 205:11
7. Хуки подробно
  • 7.1 useState09:19
  • 7.2 useEffect08:36
  • 7.3 useContext14:07
  • 7.4 useLayoutEffect06:25
  • 7.5 useCallback, useMemo12:53
  • 7.6 useImperativeHandle07:51
  • 7.7 useReducer11:21
  • 7.8 Пользовательские хуки07:22
  • 7.9 Правила использования хуков03:31
  • 7.10 Рефакторинг таймера с использованием useReducer07:42
8. Проект "Витрина"
  • 8.1 Презентация проекта01:35
  • 8.2 Обзор API, что доступно, как использовать06:47
  • 8.3 Подготовка проекта, шапка и футер10:32
  • 8.4 Вывод списка товаров19:12
  • 8.5 Состояние заказа, иконка корзины08:01
  • 8.6 Практическое задание "Функция добавления товара в заказ" - Решение12:11
  • 8.7 Создание корзины, пересчет суммы заказа в корзине19:44
  • 8.8 Функция удаления товара из корзины06:30
  • 8.9 Практическое задание "Изменение количества товара в корзине" - Решение07:58
  • 8.10 Добавление подсказки о добавлении товара15:42
  • 8.11 Публикация проекта на GitHub Pages09:17
9. Продвинутое управление состоянием приложения
  • 9.1 Концепция использования Context API и useReducer вместо пропсов02:34
  • 9.2 Создание контекста с провайдером06:50
  • 9.3 Создание редьюсера, добавление первых кейсов08:45
  • 9.4 Практическое задание "Доработка редьюсера и методов в контекст" - Решение10:13
  • 9.5 Переключение всех компонентов на контекст вместо пропсов16:08
  • 9.6 Обзор сделанного02:22
10. Роутинг и SPA-приложение
  • 10.1 Роутинг и SPA, обзор проекта02:07
  • 10.2 Базовый роутинг12:04
  • 10.3 Компонент Link04:17
  • 10.4 Хуки useParams, useHistory09:47
  • 10.5 Хуки useLocation, useRouteMatch03:20
  • 10.6 Вложенный роутинг05:12
  • 10.7 Обзор API для проекта04:28
  • 10.8 API настройка методов07:18
  • 10.9 Главная страница с категориями13:50
  • 10.10 Страница категории с блюдами11:55
  • 10.11 Страница с рецептом24:46
  • 10.12 Поиск на главной17:56
  • 10.13 Нюанс выкладки на продакшн SPA-приложения03:49
11. Подведение итогов
  • 11.1 Итоги курса01:38
Завершение курса - Получение Сертификата

Начать обучение

Студенты также изучают

online_course
new
5
  • 28 видео
  • 14 часов
online_course
new
5
  • 30 видео
  • 8 часов
online_course
new
5
  • 48 видео
  • 19 часов
online_course
4.7
  • 10 видео
  • 21 заданий
  • 1 час
online_course
new
5
  • 65 видео
  • 24 часа
online_course
new
5
  • 97 видео
  • 34 часа

Отзывы студентов о курсе

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса React с нуля для начинающих + 3 проекта в портфолио!

Kateryna Lysenko

Очень детальный курс

Наталия Селезнева

Спасибо за курс! Понравилось подробное объяснение материала

Юрий Банный

Очень полезный курс. Спасибо. Жаль что API для последнего проекта бесплатно уже не доступно

student_ySmbp855

Спасибо очень поравился курс, мягкий стиль преподавания Михаила Непомнящего.

Arman Aisenov

Обучение прошло интересно! Много нового узнал. возможно, буду возвращаться к курсу, если буду что-то забывать. Учащимся целеустремленности, настойчивости! Спасибо Михаилу и образовательной платформе beONmax.com!

Тарас Дмитрик

Супер, дякую

Вячеслав Демченко

Отличный курс! Много полезного материала и практики. Все четко структурировано и объяснено легким и понятным языком. Рекомендую этот курс всем, кто хочет развиваться в сторону фронтенд-разработки.

Надежда Дмитриева

Отличный курс! Доступно и понятно. Спасибо!

Валентин Резенов

Отличный курс, советую!

Чынгыз Акматов

Огромная благодарность Михаилу! Спасибо за такой курс!

Светлана

Прекрасный курс. Хорошо структурированный. Отдельное спасибо за разбор хуков, редюсеры и внимание к мелочам

Андрей Мартынов

Очень понравился курс. Доходчиво, без лишней воды, но тем не менее раскрыты все нюансы. Рекомендую.

Антон Сидько

Отличный курс для начинающих, хороший преподаватель, много информации без лишней воды.

Начать обучение

Преподаватель

Course Author
Михаил Непомнящий

О преподавателе курса

  • Профессиональный практик-преподаватель
  • По образованию - прикладной информатик
  • Работал и сотрудничал с крупными международными и российскими образовательными проектами

"Преподаю людям разных возрастов - от 8-ми лет до 60-ти. Любимая дисциплина - создание web-сайтов.

При создании обучающих видео стараюсь дать максимум полезной информации, при этом руководствуюсь принципом эффективности - без "воды" и "растеканию по дереву". Каждая минута видео уроков пройдет для Вас с пользой!"

Видеоуроки: 94


Продолжительность: ~13 часов